<template>
    <view class="orderDetail pb-150">
        <Navigation backType="back" title="订单详情" background="#fff" />
        <view class="background-white ph-32 pv-32">
            <view class="f ai-c jc-s-b">
                <view class="fs-24 text-color3">订单编号：{{ detail.no }}</view>
                <view class="fs-24" :style="{ color: statusList[detail.status].color }">{{ statusList[detail.status].name }}</view>
            </view>
            <view class="f mt-32 mb-12" v-for="(item, index) in detail.items" :key="index">
                <image :src="item.picUrl" class="w-160 h-160 b-12 mr-20"></image>
                <view class="f f1 fd-c">
                    <view class="fs-28 fw-600 text-color4"> {{ item.spuName }}</view>
                    <view class="f ai-c jc-s-b w-f">
                        <!-- <view class="fs-24 mt-8 text-color3">成都市武侯区科华南路1号</view> -->
                        <view class="fs-24 text-color3">x1</view>
                    </view>
                    <view class="f ai-c jc-s-b w-f mt-22">
                        <view class="fs-26 fw-600 text-color7">¥{{ item.payPrice }}</view>
                        <!-- <view class="w-152 h-64 b-64 f ai-c jc-c fs-26 text-color4 border">再来一单</view> -->
                    </view>
                </view>
            </view>
            <view class="f ai-c jc-s-b mt-20">
                <view class="fs-26 text-color4">商品总额</view>
                <view class="fs-26 fw-500 text-color1">¥{{ detail.totalPrice }}</view>
            </view>
            <view class="f ai-c jc-s-b mt-20" v-if="detail.discountPrice>=0">
                <view class="fs-26 text-color4">优惠</view>
                <view class="fs-26 fw-500 text-color1">-¥{{ detail.discountPrice}}</view>
            </view>
            <view class="f ai-c jc-s-b mt-20">
                <view class="fs-26 text-color4">运费</view>
                <view class="fs-26 fw-500 text-color1">¥{{ detail.deliveryPrice }}</view>
            </view>
            <view class="f jc-f-e pt-33 ai-c price">
                <text class="fs-26 fw-500 text-color1">应付金额：</text>
                <text class="fs-36 fw-500 text-color7">¥{{ detail.payPrice }}</text>
            </view>
        </view>
        <!-- 商家 -->
         <view class="background-white ph-32 pv-32 mt-20" v-if="store">
            <view class="f pb-35 business" @click='toStore(store.id)'>
                <image :src="store.picUrl" class="w-170 h-170 b-12 mr-24"></image>
                <view class="f f1 fd-c">
                    <view class="fs-32 fw-600 text-color4">{{store.name}}</view>
                    <view class="f mt-8">
                        <image :src="index >= Number(store.score) ? star : starSelect" class="w-24 h-24 mr-8" v-for="(item, index) in 5" :key="index"></image>
                    </view>
                    <view class="f mt-12">
                        <view class="fs-26 text-color3">店铺描述：</view>
                        <view class="f f1"><view class="text-ellipsis-1 fs-26 text-color2">{{store.description}}</view></view>
                    </view>
                    <view class="f mt-12">
                        <view class="fs-26 text-color3">店铺地址：</view>
                        <view class="f f1"><view class="text-ellipsis-1 fs-26 text-color2">{{store.addressName}}{{store.addressDetail}}</view></view>
                    </view>
                </view>
            </view>
            <view class="mt-32 f ai-c" v-if="detail.staffInfo">
                <image :src="detail.staffInfo.avatar" class="w-100 h-100 b-12 mr-24"></image>
                <view class="f f1 fd-c">
                    <view class="f ai-c">
                        <view class="fs-30 fw-600 text-color4 mr-12">{{detail.staffInfo.name}}</view>
                        <view class="h-28 ph-6 title b-4 fs-20 f ai-c"> {{detail.staffInfo.jobTitle}}</view>
                    </view>
                  <!--  <view class="f mt-16 ai-c">
                        <image :src="index < rate - 1 ? star : starSelect" class="w-24 h-24 mr-8" v-for="(item, index) in 5" :key="index"></image>
                        <view class="ml-12 fs-28 fw-600 fraction">4.2</view>
                    </view> -->
                </view>
            </view>
        </view>
        <view class="background-white ph-32 pt-32 pb-12 mt-20">
            <view class="mb-20 f">
                <view class="fs-26 text-color4 mr-32">订单编号</view>
                <view class="fs-26 fw-500 text-color1 f ai-c"
                    >{{ detail.no }}<view class="w-72 h-32 b-32 f ai-c jc-c fs-22 text-color1 copy ml-16" @click="handleCopy">复制</view></view
                >
            </view>
            <view class="mb-20 f">
                <view class="fs-26 text-color4 mr-32">订单状态</view>
                <view class="fs-26 fw-500 text-color1 f ai-c">{{ statusList[detail.status].name }}</view>
            </view>
            <view class="mb-20 f" v-show="detail.logisticsNo">
                <view class="fs-26 text-color4 mr-32">物流单号</view>
                <view class="fs-26 fw-500 text-color1 f ai-c">{{ detail.logisticsNo }}</view>
            </view>
            <view class="mb-20 f" v-show="detail.payChannelCode">
                <view class="fs-26 text-color4 mr-32">支付方式</view>
                <view class="fs-26 fw-500 text-color1 f ai-c">{{ payChannelCodeList[detail.payChannelCode] }}</view>
            </view>
            <view class="mb-20 f">
                <view class="fs-26 text-color4 mr-32">下单时间</view>
                <view class="fs-26 fw-500 text-color1 f ai-c">{{ detail.createTime }}</view>
            </view>
            <view class="mb-20 f" v-show="detail.payTime">
                <view class="fs-26 text-color4 mr-32">付款时间</view>
                <view class="fs-26 fw-500 text-color1 f ai-c">{{ detail.payTimeData }}</view>
            </view>
            <view class="mb-20 f" v-show="detail.deliveryTime">
                <view class="fs-26 text-color4 mr-32">发货时间</view>
                <view class="fs-26 fw-500 text-color1 f ai-c">{{ detail.deliveryTimeData }}</view>
            </view>
            <view class="mb-20 f" v-show="detail.finishTime">
                <view class="fs-26 text-color4 mr-32">完成时间</view>
                <view class="fs-26 fw-500 text-color1 f ai-c">{{ detail.finishTimeData }}</view>
            </view>
            <view class="mb-20 f" v-show="detail.userRemark">
                <view class="fs-26 text-color4 mr-32">备注</view>
                <view class="fs-26 fw-500 text-color1 f ai-c">{{ detail.userRemark }}</view>
            </view>
        </view>

        <view :style="{ paddingBottom: safeAreaBottom + 'px' }" class="bot w-f">
            <view class="f jc-f-e h-128 ai-c ph-40">
                <!-- <view class="w-152 h-64 b-64 f ai-c jc-c fs-26 text-color4 border ml-16">申请售后</view> -->
                <view class="w-152 h-64 b-64 f ai-c jc-c fs-26 text-color4 border ml-16" v-show="detail.status == 0" @click="handleCancel">取消订单</view>
                <view class="w-152 h-64 b-64 f ai-c jc-c fs-26 text-color border2 ml-16" v-show="detail.status == 0" @click="handlePay">立即付款</view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import star from '@/static/index/star.png';
import starSelect from '@/static/index/star-select.png';
import { orderGetDetail, orderSubmit, orderCancel } from '@/services/api/shop/order';
import { useAuthStore } from '@/store/modules/auth';
import {spuGetDetail, storeDetail} from '@/services/api/shop/index';

const authStore = useAuthStore();
const { proxy } = getCurrentInstance();
const id = ref<string>();
const detail = ref<any>();
const store = ref({});
const statusList = {
    '0': { name: '待付款', color: '#FE8C29' },
    '10': { name: '待收货', color: '#FE8C29' },
    '20': { name: '待收货', color: '#FE8C29' },
    '30': { name: '已完成', color: '#25B85B' },
    '40': { name: '已取消', color: '#999999' },
};
const payChannelCodeList = {
    wx_lite: '微信支付',
};
onLoad((options: any) => {
    id.value = options.id;
    getDetail();
});
//取消订单
async function handleCancel() {
    uni.showModal({
        title: '提示',
        content: '确认取消订单？',
        success: async function (res) {
            if (res.confirm) {
                await orderCancel(id.value);
                getDetail();
            } else if (res.cancel) {
                console.log('用户点击取消');
            }
        },
    });
}
//立即支付
async function handlePay() {
     const {data} = await orderSubmit({ id: detail.value.payOrderId, channelCode: 'wx_lite', channelExtras: { openid: authStore.getOpenId } });
	let displayContent = JSON.parse(data.displayContent);
	await uni.requestPayment({
		provider: "wxpay",
		timeStamp: displayContent.timeStamp,
		nonceStr: displayContent.nonceStr,
		package: displayContent.packageValue,
		signType: displayContent.signType,
		paySign: displayContent.paySign,
		success(res2) {
			uni.showToast({
			    title: '支付成功',
			});
			setTimeout(() => {
			  getDetail();
			}, 1000);

		},
		fail(e) {
			console.log(e)
			uni.showToast({
				title: '支付失败,请重新支付',
				icon: 'none'
			})
		}
	})

}
async function getDetail() {
    const { data } = await orderGetDetail({ id: id.value });
    data.createTime = proxy.$moment(data.createTime).format('YYYY/MM/DD HH:mm:ss');
    data.payTimeData = proxy.$moment(data.payTime).format('YYYY/MM/DD HH:mm:ss');
    data.deliveryTimeData = proxy.$moment(data.deliveryTime).format('YYYY/MM/DD HH:mm:ss');
    data.finishTimeData = proxy.$moment(data.finishTime).format('YYYY/MM/DD HH:mm:ss');
	if(data.staffInfo){

		data.staffInfo = JSON.parse(data.staffInfo)
	}

    detail.value = data;

		getShop()

}
//店铺详情
async function getShop() {
  let storeId=detail.value.storeId
  if(storeId){

    const { data } = await storeDetail({ storeId: storeId });
    store.value = data;
  }else{
    const res= await spuGetDetail({ id: detail.value.items[0].spuId });
    const { data } = await storeDetail({ storeId: res.data.storeId });
    store.value = data;
  }



}
const toStore = (id:number) => {
    uni.navigateTo({
        url: '/pages_shop/business/index?id='+id,
    });
};
//复制
function handleCopy() {
    uni.setClipboardData({
        data: detail.value.no, // 必须字符串
        success: function () {
            uni.showToast({
                title: '复制成功',
            });
        },
    });
}
//底部安全距离
const systemInfo = uni.getSystemInfoSync();
let safeArea = systemInfo.safeArea;
let screenHeight = systemInfo.screenHeight;
let safeAreaBottom = screenHeight - safeArea.bottom;
</script>
<style lang="scss" scoped>
.orderDetail {
    background: #f5f5f5;
    min-height: 100vh;
    .fraction {
        color: #fabb3d;
    }
    .title {
        background: #fff9e6;
        color: #fac519;
    }
    .business {
        border-bottom: 1px solid #f5f5f5;
    }
    .border2 {
        border: 1rpx solid #fabb3c;
    }
    .bot {
        position: fixed;
        left: 0;
        bottom: 0;
        background: #fff;
    }
    .copy {
        background: #f5f5f5;
    }
    .price {
        border-top: 1px solid #f4f4f4;
    }
    .background-white {
        background: #fff;
    }
    .border {
        border: 1rpx solid #dddddd;
    }
}
</style>
